// 多选题
import React, { useState } from "react";

import { StyleSheet, Text, View, TextInput } from "react-native";

import ShowCompletion from "./ShowCompletion";
import ShowChoiceQues from "./showChoiceQues";
import ShowEssayQues from "./ShowEssayQues";
import SelectLocation from "../SelectLocation";

const ShowComplexQues = ({ number, QuesContent, isEdit, flag, editAnswer }) => {
  // console.log("复合题型---", QuesContent);
  let complexQues = QuesContent;
  const editComplexAnswer = (key1, key2, key3, value) => {
    console.log("key---", key1, key2, key3, "value---", value);
    let title = complexQues.title.map((ques, index) => {
      if (index == key3) {
        console.log("===", value.answer);
        return {
          ...ques,
          optionFlag: value.optionFlag,
          answer: value.answer,
        };
      } else {
        return ques;
      }
    });
    let ques = {
      ...complexQues,
      title: title,
    };
    // console.log(ques);
    editAnswer(key1, key2, key3, ques);
  };
  return (
    <View style={styles.borderView}>
      <View style={{ flexDirection: "row", marginBottom: 7 }}>
        {/* <View>
          {QuesContent.needAnswer ? (
            <Text style={{ color: "red", marginRight: 1 }}>* </Text>
          ) : null}
          <Text style={{ fontWeight: "bold", color: "#000", fontSize: 15 }}>
            {number != "" ? number + ". " : ""}
          </Text>
        </View> */}
        <View style={{ width: "100%" }}>
          {QuesContent.title.map((ques, q_index) => {
            let t_number = number + String.fromCharCode(q_index + 97);
            if (
              (ques.type == 1 || ques.type == 7) &&
              (!isEdit || ques.visible)
            ) {
              return (
                <ShowEssayQues
                  key={q_index}
                  isEdit={isEdit}
                  flag={isEdit ? [...flag, q_index] : flag}
                  number={t_number}
                  QuesContent={ques}
                  editAnswer={editComplexAnswer}
                ></ShowEssayQues>
              );
            }
            if (
              (ques.type == 2 || ques.type == 3) &&
              (!isEdit || ques.visible)
            ) {
              // console.log("啥意思，不显示---", ques);
              return (
                <ShowChoiceQues
                  key={q_index}
                  isEdit={isEdit}
                  flag={isEdit ? [...flag, q_index] : flag}
                  number={t_number}
                  QuesContent={ques}
                  editAnswer={editComplexAnswer}
                ></ShowChoiceQues>
              );
            }
            if (ques.type == 4 && (!isEdit || ques.visible)) {
              return (
                <ShowCompletion
                  key={q_index}
                  isEdit={isEdit}
                  flag={isEdit ? [...flag, q_index] : flag}
                  // number={t_number}
                  QuesContent={ques}
                  editAnswer={editComplexAnswer}
                ></ShowCompletion>
              );
            }
            if (ques.type == 6 && (!isEdit || ques.visible)) {
              return (
                // <View key={index}>
                //   <View
                //     style={{
                //       height: 5,
                //       backgroundColor: "#f8f8f8",
                //     }}
                //   ></View>
                <SelectLocation
                  key={q_index}
                  isEdit={isEdit}
                  flag={isEdit ? [...flag, q_index] : flag}
                  number={t_number}
                  QuesContent={ques}
                  editAnswer={editComplexAnswer}
                ></SelectLocation>
                // </View>
              );
            }
          })}
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  borderView: {
    paddingTop: 15,
    paddingLeft: 5,
    // paddingRight: 15,
    width: "100%",
    // backgroundColor: "red",
    // justifyContent: "center",
    // backgroundColor: "#eee",
    // height: "100%",
  },
  inputBox: {
    marginTop: 6,
    borderColor: "#ddd",
    borderWidth: 1,
    // height: 100,
    borderRadius: 3,
    padding: 10,
    paddingTop: 10,
    paddingBottom: 10,
    marginLeft: 5,
    marginRight: 5,
  },
});

export default ShowComplexQues;
